package com.david.jetpack.compose

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Checkbox
import androidx.compose.material.RadioButton
import androidx.compose.material.Slider
import androidx.compose.material.Switch
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.max
import coil.compose.AsyncImage
import com.david.jetpack.R
//控件参考链接：https://developer.android.google.cn/develop/ui/compose/documentation?hl=zh-cn
//参考链接：https://blog.csdn.net/guolin_blog/article/details/131622694?spm=1001.2014.3001.5501
//https://blog.csdn.net/guolin_blog/article/details/132253342?spm=1001.2014.3001.5501
class ComposeTestActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            messageCard()
        }
//        setcontent {
//            Text("haha")
//        }
    }

    @Preview
    @Composable
    fun messageCard() {
        val viewModel = remember { ComposeViewModel() }
        val count = viewModel.count.asIntState()
//        var count by remember {
//            mutableStateOf(0)
//        }
        Row(
            modifier = Modifier
                .background(Color.Blue)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.Bottom
        ) {
            Column(
                modifier = Modifier
                    .background(Color.White)
            ) {
                Image(
                    modifier = Modifier.width(30.dp),
                    painter = painterResource(R.mipmap.whatsapp),
                    contentDescription = "",
                    contentScale = ContentScale.FillBounds
                )
                Switch(checked = false, onCheckedChange = fun(checked) {

                })
                Slider(value = 30f, valueRange = 0f..100f, onValueChange = fun(value) {

                })

                SettingItem()

                GoodsItem()

                Row(modifier = Modifier.fillMaxWidth().horizontalScroll(state = rememberScrollState())) {
                    arrayOf(1,2, 3,4, 5, 6).forEach { message ->
                        Text("     testtest$message", modifier = Modifier.padding(top = 20.dp, bottom = 20.dp).width(100.dp))
                    }
                }


                LazyRow {
                    // Add a single item
                    item {
                        Text(text = "First item", modifier = Modifier.width(100.dp))
                    }

                    // Add 5 items
                    items(5) { index ->
                        Text(text = "Item: $index", modifier = Modifier.width(100.dp))
                    }

                    // Add another single item
                    item {
                        Text(text = "Last item", modifier = Modifier.width(100.dp))
                    }
                }

                var gridItems = arrayOf(1, 2, 3, 4, 5, 6)
                LazyHorizontalGrid(
                    rows = GridCells.Fixed(2),
                ) {
                    items(gridItems.size) { index ->
                        Text("$index", modifier = Modifier.width(200.dp).height(50.dp).padding(start = 10.dp).background(color = Color.Green))
                    }
                }

                Checkbox(checked = false, onCheckedChange = fun(checked) {

                })

                Text("hello compose!!!", modifier = Modifier.background(color = Color.Green))


                Text(
                    text = "hahah", modifier = Modifier
                        .padding(bottom = Dp(10f))
                )

                Text("count is ${count}", modifier = Modifier.clickable {
                    Log.e("test", "row is clicked")
                    viewModel.increaseCount()
                })

                val randomSizedPhotos = arrayListOf("https://profile-avatar.csdnimg.cn/253521140c64401e834a6b11af650794_divaid.jpg!2",
                    "https://i-blog.csdnimg.cn/blog_migrate/f6868765bfb70d19bc0322089af93ec5.png#pic_center",
                    "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bdf01c5740044d9b91a43d01257fb581~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?",
                    "https://i-operation.csdnimg.cn/images/f70cbe190d3c4f25901cb03b6971f64d.png",
                    "https://ts1.tc.mm.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=291&h=182&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
                    "https://ts1.tc.mm.bing.net/th/id/OIP-C.3nrDn8IrD3x5iVX0PI6cDgHaLH?w=122&h=182&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
                    "https://ts1.tc.mm.bing.net/th/id/OIP-C.7lURCaoa-V1fPFkaYrhOdwHaHZ?w=183&h=182&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
                    "https://ts1.tc.mm.bing.net/th/id/OIP-C.qOVNXup8kQ0DZg7RTVN3ZwHaE8?w=208&h=180&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
                    "https://ts1.tc.mm.bing.net/th/id/OIP-C.d_U7dREQ1nUEfhxwyImyIQHaFi?w=181&h=206&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
                    "https://tse2-mm.cn.bing.net/th/id/OIP-C.PpnwDQTF2DQ-fCstPBf6JAHaEJ?w=334&h=187&c=7&r=0&o=7&pid=1.7&rm=3",
                    "https://tse4-mm.cn.bing.net/th/id/OIP-C.k0Dt6snkGdO0i62rndBjtQHaE8?w=215&h=184&c=7&r=0&o=7&pid=1.7&rm=3",
                    "https://tse4-mm.cn.bing.net/th/id/OIP-C.HnAsFAHHAr8IUOeFX7F2hAHaLH?w=119&h=180&c=7&r=0&o=7&pid=1.7&rm=3")
                LazyVerticalStaggeredGrid(
                    columns = StaggeredGridCells.Fixed(3),
                    verticalItemSpacing = 4.dp,
                    horizontalArrangement = Arrangement.spacedBy(4.dp),
                    content = {
                        items(randomSizedPhotos.size) { index ->
                            AsyncImage(
                                randomSizedPhotos[index],
                                contentScale = ContentScale.Crop,
                                contentDescription = null,
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .wrapContentHeight()
                            )
                        }
                    },
                    modifier = Modifier.fillMaxSize()
                )
            }
        }

    }

}

@Composable
fun GoodsItem() {
    Column {
        Image(painter = painterResource(R.mipmap.whatsapp), modifier = Modifier.width(50.dp), contentDescription = null)
        Text("商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称", maxLines = 1, overflow = TextOverflow.Ellipsis)
        Text("188$", modifier = Modifier.padding(top = 20.dp), style = TextStyle(color = Color.Red))
    }

}

@Composable
fun SettingItem() {
    Row(
        modifier = Modifier
            .background(color = Color.Blue)
            .padding(top = 10.dp, bottom = 10.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(R.mipmap.whatsapp),
            contentDescription = null,
            modifier = Modifier.width(30.dp)
        )
        Spacer(modifier = Modifier.weight(1f))
        Text("测测")
        Image(
            painter = painterResource(R.mipmap.whatsapp),
            contentDescription = null,
            modifier = Modifier.width(30.dp)
        )
    }
}